<!--  -->
<template>
  <div class="showDataPanel">
    <el-table class="realTableView" :data="dataList" row-key="deviceId">
      <el-table-column prop="rangeName" label="区域名称" align="center"></el-table-column>
      <el-table-column prop="deviceName" label="设备名称" align="center"></el-table-column>
      <el-table-column prop="deviceNo" label="设备编号" align="center"></el-table-column>
      <el-table-column label="采集时间" prop="dataTime" width="90"/>
      <el-table-column label="瞬时流量" align="center">
        <template #default="scope">
          {{ scope.row.instantaneousFlow }} {{ scope.row.instantaneousFlowUnit }}
        </template>
      </el-table-column>
      <el-table-column label="累计流量" align="center">
        <el-table-column prop="accumulatedFlow" label="累计流量" align="center"></el-table-column>
        <el-table-column prop="accumulatedFlowUnit" label="单位" align="center"></el-table-column>
        <el-table-column prop="accumulatedFlowConsumption" label="使用量" align="center"></el-table-column>
      </el-table-column>
      <el-table-column :label="'正累计\n流量'" align="center">
        <template #default="scope">
          {{ scope.row.positiveAccumulatedFlow }} {{ scope.row.positiveAccumulatedFlowUnit }}
        </template>
      </el-table-column>
      <el-table-column :label="'负累计\n流量'" align="center">
        <template #default="scope">
          {{ scope.row.negativeAccumulatedFlow }} {{ scope.row.negativeAccumulatedFlowUnit }}
        </template>
      </el-table-column>
      <el-table-column prop="temperature" :label="'温度\n℃'" align="center"/>
      <el-table-column prop="pressure" :label="'压力\nMPa'" align="center"/>
      <el-table-column prop="frequency" :label="'频率\nHz'" align="center"/>
      <el-table-column prop="pressureDelta" :label="'压差\nKPa'" align="center"/>
      <el-table-column prop="density" :label="'密度kg\n/m³'" align="center"/>
      <el-table-column prop="power_outage_duration" label="累计停电时间" align="center"/>
      <el-table-column prop="power_outage_count" label="停电次数" align="center"/>
    </el-table>
  </div>
</template>

<script>

let component;
import moment from 'moment';

export default {
  watch:{
    async deviceNoList() {
      let response = await component.$asyncPost("data", {
        actionType: "realTimeData",
        deviceInfoList: component.deviceInfoList,
        type:"flowMeter"
      });
      if(response.success){
        component.dataList = response.dataList;
      }

    }
  },
  data() {
    return {
      deviceInfoList: [],
      deviceNoList: [],
      dataList:[],
      queryParams: {
        dateRange: [moment().subtract(1, 'days'), moment()],
        dateType: 'month'
      }
    };
  },
  methods: {
    getData(data,type) {
      this.queryParams.dateRange = data;
      this.queryParams.dateType=type;
      this.$emit('getData');
    }
  },
  mounted() {
    component = this;
  }
}

</script>
<style lang='scss'>
.test1 {
}
</style>